<template>
  <el-dialog title="设备详情"
    :visible.sync="visible"
    width="750px"
    :close-on-click-modal="false"
    @close="close"
  >
    <div class="top-search">
      <div v-if='item'>用户ID:{{ item.user_id }}</div>
      <div>
        <span>所选项目: </span>
        <el-select v-model="app_id" placeholder="请选择" @change="getList">
          <el-option v-for="item in permission_projectList" :key="item.dictValue"
            :label="item.name"
            :value="item.app_id" />
        </el-select>
      </div>
    </div>
    <div class="top-title">历史设备</div>
    <div class="content" v-if="dataList.length">
      <div class="content-left">
        <div>历史登录设备共计{{ dataList.length }}台</div>
        <div>历史登录地点共{{ getAllProvince.length }}处：{{ getAllProvince.join('、') }}。</div>
      </div>
      <el-button type="primary" size="small" @click="clearAll">一键清空历史设备</el-button>
    </div>
    <el-table v-loading="loading"
      height="400px"
      :data="dataList">
      <el-table-column label="序号" type="index"  width="80"> </el-table-column>
      <el-table-column label="设备" prop="device_name" ></el-table-column>
      <el-table-column label="最近一次登录时间/地点" width="200">
        <template slot-scope="scope">
          <div>
            {{ scope.row.updated_at | parseTime }}/{{ scope.row.province }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserDeviceList, removeUserDevice } from '@/api/operations/device'
import { parseTime } from '@/utils/'

export default {
  name: 'userInfODeviceList',
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList']),
    getAllProvince () {
      const list = this.dataList.map(item => item.province)
      return Array.from(new Set(list))
    }
  },
  filters: {
    parseTime
  },
  data () {
    return {
      app_id: '',
      item: null,
      visible: false,
      loading: false,
      dataList: []
    }
  },
  // computed: {
  // ...mapGetters('zcsd-core', ['permission_projectList']),
  // title () {
  //   const typeText = this.isEdit ? '编辑' : this.isView ? '查看' : '新增'
  //   return `${typeText}设备限制`
  // },
  // submitText () {
  //   return this.isEdit ? '更新' : '新增'
  // },
  // isView () {
  //   return this.type === 'view'
  // },
  // isEdit () {
  //   return this.type === 'edit'
  // }
  // },
  methods: {
    clearAll () {
      this.$confirm(`确定清空`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeUserDevice({
          user_id: this.item.user_id,
          appid: this.app_id,
          ids: this.dataList.map(item => item.id)
        }).then(() => {
          this.msgSuccess(`删除成功`)
          this.getList(100)
        })
      }).catch(() => {})
    },
    handleDelete (row) {
      this.$confirm(`确定删除`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeUserDevice({
          user_id: this.item.user_id,
          appid: this.app_id,
          ids: [row.id]
        }).then(() => {
          this.msgSuccess(`删除成功`)
          this.getList(100)
        })
      }).catch(() => {})
    },
    getList (count) {
      const appid = this.app_id
      if (appid) {
        this.loading = true
        getUserDeviceList({
          page: 1,
          page_size: count,
          appid,
          user_id: this.item.user_id
        }).then(res => {
          if (res.data.data.count > count) { // 超大数据的，再次请求，得到准确数据
            this.getList(res.data.data.count)
          } else {
            this.dataList = res.data.data.list || []
          }
        }).finally(() => {
          this.loading = false
        })
      }
      // getUserDeviceList
    },
    open (item) {
      this.visible = true
      this.item = item || null
      if (item) {
        this.app_id = item.reg_app_id
        this.getList(100)
      }
    },
    close () {
      this.visible = false
      this.item = null
      // this.type = ''
    }

  },
  created () {
    // this.getChannelOptions()
  }
}
</script>

<style lang="scss" scoped>
.top-search{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-title{
  font-size:16px;
  font-weight: bold;
  margin:10px 0;
}
.content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-left{
  display: flex;
  flex-direction: column;
  gap:5px;
}
 </style>
